<template>
	<view>
		<!-- <page-head ref="pageHead" :title="'森歌微商城-行为记录'" :headtype="2"></page-head> -->
		<image class="bgimg" src="https://fx.senge.com/uploads/mini/sengeimg/my_bg.png"></image>
		<view class="content margin30">
			<view class="rowtopinfo flex-start">
				<image class="rowtopimg" :src="topinfo.avatar" mode=""></image>
				<view class="rowtitle nickname">{{topinfo.nickname}}</view>
				<view class="" style="margin-left: 14rpx;">
					<image v-if="topinfo.level==1" class="vip_img" src="https://fx.senge.com/uploads/mini/sengeimg/my_py.png" mode=""></image>
					<image v-if="topinfo.level==2&& topinfo.user_type==0||topinfo.level==2 &&topinfo.user_type==1" class="vip_img" src="https://fx.senge.com/uploads/mini/sengeimg/mypttk.png" mode=""></image>
					<image v-if="topinfo.level==2 && topinfo.user_type==2" class="vip_img" src="https://fx.senge.com/uploads/mini/sengeimg/myzysqtk.png" mode=""></image>
					<image v-if="topinfo.level==3 && topinfo.level_type==0" class="vip_img" src="https://fx.senge.com/uploads/mini/sengeimg/mysqtk.png" mode=""></image>
					<image v-if="topinfo.level==3 && topinfo.level_type==2" class="vip_img" src="https://fx.senge.com/uploads/mini/sengeimg/myzjtk.png" mode=""></image>
					<image v-if="topinfo.level==4" class="vip_img" src="https://fx.senge.com/uploads/mini/sengeimg/myjxs.png" mode=""></image>
				</view>
			</view>
			<view class="flex-s Blue">
				<view class="calendar">消费分析</view>
				<view class="ordernavmain">
					<view class="ordereach" :class="activenav == 0 ? 'activenav':''" @click="navclick(0)">最近消费</view>
					<view class="ordereach" :class="activenav == 1 ? 'activenav':''" @click="navclick(1)">累计消费</view>
					<!-- <view class="ordereach" :class="activenav == 2 ? 'activenav':''" @click="navclick(2)">售后记录</view> -->
				</view>
			</view>
		</view>
		<view class="mescrollBox margin30">
			<mescroll-body ref="mescrollRef" :up="{
					  	noMoreSize: 10,
					  	empty: {
					  		icon: '/static/image/order_null.png',
					  		tip: '暂无数据~',
					  		fixed: false
					  	}
					  }" @init="mescrollInit" @down="downCallback" @up="upCallback">
				<view class="mybg">
					<view class="contentbox margin30">
						<view class="row " v-for="(item,index) in dataList">
							<!-- <view class="rowtopinfo flex-start">
								<image class="rowtopimg" :src="item.avatar" mode=""></image>
								<view class="rowtitle nickname">{{item.nickname}}</view>
							</view> -->
							<view class="flex-s">
								<view class="row_le">
									<view class="rowtop flex-start">
										<view class="iconfont arrows">&#xe61c;</view>
										<view class="rowtitle">{{item.source_type}}</view>
									</view>
									<view class="time">{{item.create_time}}</view>
								</view>
								<view class="row_ri">{{item.change_amount_format}}</view>
							</view>
							<!-- <view class="time digdig">{{item.title}}</view> -->
							<!-- <view class="time">{{item.address}}</view> -->
						</view>
					</view>
				</view>
			</mescroll-body>
		</view>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins";
	import MescrollMoreItemMixin from "@/components/mescroll-uni/mixins/mescroll-more-item";
	import {khaccountLog} from '@/api/user'
	import {ljaccountLog} from '@/api/user'
	export default {
		mixins: [MescrollMixin, MescrollMoreItemMixin],
		data() {
			return {
				dataList:[],
				topinfo:[],
				activenav: 0,
				id: '',
			}
		},
		onLoad(option) {
			this.id= option.id
			// this.getkhaccountLog()
		},
		// computed: {
		//     ...mapGetters(["appConfig"]),
		// },
		methods: {
			// async getkhaccountLog(){
			// 	if(this.activenav==0){
			// 		const {
			// 			data,
			// 			code
			// 		} = await khaccountLog({
			// 			type: 0,
			// 			source: 1,
			// 			user_id: this.id
			// 		})
			// 		if (code == 1) {
			// 			this.dataList = data.list
			// 			this.topinfo = data.user_info
			// 		}
			// 	}else if(this.activenav==1){
			// 		const {
			// 			data,
			// 			code
			// 		} = await ljaccountLog({
			// 			type: 0,
			// 			source: 2,
			// 			user_id: this.id
			// 		})
			// 		if (code == 1) {
			// 			this.dataList = data.list
			// 			this.topinfo = data.user_info
			// 		}
			// 	}
			// },
			upCallback(page) {
				let pageNum = page.num; // 页码, 默认从1开始
				let pageSize = page.size; // 页长, 默认每页10条
				let {
					orderType,
				} = this;
				if(this.activenav==0){
					khaccountLog({
						type: 0,
						page_size: pageSize,
						page_no: pageNum,
						source: 1,
						user_id: this.id
					}).then(({
						data
					}) => {
						this.topinfo = data.user_info
						let curPageData = data.list;
						let curPageLen = curPageData.length;
						let hasNext = !!data.more;
						if (page.num == 1) this.dataList = [];
						this.dataList = this.dataList.concat(curPageData);
						this.mescroll.endSuccess(curPageLen, hasNext);
					})
				}else if(this.activenav==1){
					ljaccountLog({
						type: 0,
						page_size: pageSize,
						page_no: pageNum,
						source: 1,
						user_id: this.id
					}).then(({
						data
					}) => {
						let curPageData = data.list;
						let curPageLen = curPageData.length;
						let hasNext = !!data.more;
						if (page.num == 1) this.dataList = [];
						this.dataList = this.dataList.concat(curPageData);
						this.mescroll.endSuccess(curPageLen, hasNext);
					})
				}
			},
			
			navclick(type) { //切换状态
				let that = this;
				that.activenav = type;
				that.dataList = []
				// that.getkhaccountLog()
				// if(type ==0){
					that.downCallback() 
				// }
				// if(type ==1){
				// 	that.downCallback() 
				// }
			},
		}
	}
</script>

<style>
	page{
		background-color: #f8f8f8;
	}
	.mybg{
		position: relative;
		background-color: #fff;
	}
	.bgimg{
		width: 100%;
		height: 300rpx;
	}
	.head{
		width: 100rpx;
		height: 100rpx;
		border-radius: 50rpx;
		margin-right: 20rpx;
	}
	.userinfo{
		width: 100%;
		position: absolute;
		top: 36rpx;
	}
	.sets image{
		width: 44rpx;
		height: 42rpx;
		margin-left: 22rpx;
	}
	.topinfo image{
		width: 42rpx;
		height: 40rpx;
	}
	.topinfo {
		position: relative;
	}
	.infonumber{
		background-color: #ff9200;
		font-size: 22rpx;
		color: #fff;
		width: 28rpx;
		height: 28rpx;
		line-height: 28rpx;
		text-align: center;
		border-radius: 30rpx;
		top: -18rpx;
		right: -10rpx;
	}
	.nametop{
		width: 560rpx;
/* 		background-color: antiquewhite; */
	}
	.name{
		font-size: 32rpx;
		color: #fff;
		margin-bottom: 18rpx;
	}
	.vip{
		width: 120rpx;
		text-align: center;
		border-radius: 50rpx;
		font-size: 20rpx;
		background-color: #fff;
		color: #f3505c;
	}
	.content{
		margin-bottom: 30rpx;
		/* padding: 26rpx; */
		width: 690rpx;
		box-sizing: border-box;
		position: absolute;
		top: 30rpx;
	}
	.ordernavmain {
		width: 44%;
		display: flex;
		justify-content: space-between;
	}
	.ordereach {
		position: relative;
		color: #0A0A0A;
		font-size: 24rpx;
		width: 130rpx;
		padding: 8rpx;
		text-align: center;
		border-radius: 40rpx;
	}
	.activenav {
		color: #fff;
		background-color: #f3505c;
	}
	.calendar{
		font-size: 30rpx;
		color: #1d1d1d;
		margin-top: -4rpx;
		font-weight: 900;
	}
	.cease{
		font-size: 28rpx;
	}
	.contentbox{
		padding-bottom: 20rpx;
	}
	.row{
		margin-bottom: 26rpx;
		background-color: #fff;
		box-shadow: 0px 0px 6rpx 0px rgba(140,140,140,0.43);
		border-radius: 10rpx;
		padding: 38rpx 14rpx;
	}

	.arrows{
		margin-right: 20rpx;
		font-size: 22rpx;
		font-weight: 900;
		color: #f3505c;
	}
	.rowtitle{
		font-size: 28rpx;
		color: #606060;
	}
	.time{
		font-size: 24rpx;
		color: #606060;
		margin-top: 10rpx;
		margin-left: 44rpx;
	}
	.digdig{
		margin-top: 32rpx;
	}
	.row_ri{
		font-size: 36rpx;
		color: #5d5d5c;
	}
	.rowtopimg{
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}
	.nickname{
		font-size: 30rpx;
		color: #753f32;
	}
	.rowtopinfo{
		padding: 26rpx;
		/* margin-bottom: 26rpx; */
	}
	.Blue{
		padding: 34rpx 26rpx; 
		background-color: #fff;
		border-radius: 12rpx;
	}
	.bgimg{
		width: 100%;
		height: 300rpx;
	}
	.mescrollBox{
		background-color: #ffffff;
		margin-top: -26rpx;
	}
	.vip_img{
		width: 160rpx;
		height: 44rpx;
	}
</style>
